<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title></title>
        <script type='text/javascript'>

            var CTP_WEB_FULLPATH ='../';

        </script>
        <link href='../../css/skins/standard/ctp-common.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/validator.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/borderlayout.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/panel.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/groupbox.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/tabs.css' rel='stylesheet' type='text/css'/>
		<link href='../../css/button.css' rel='stylesheet' type='text/css'/>
		<link href='../../css/gridlayout.css' rel='stylesheet' type='text/css'/>
        <script type='text/javascript' src='../../js/jquery/jquery.js'></script>
        <script type='text/javascript' src='../../js/jquery/jquery-migrate.js'></script>
        <script type='text/javascript' src='../../js/jqueryui/jquery-ui.js'></script>
        <script type='text/javascript' src='../../js/ctp/public/jsextend.js'></script>
        <script type='text/javascript' src='../../js/ctp/public/ctp.core.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script> 
		<script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>
        <script type='text/javascript' src='../../js/ctp/validator/ctp.validator-rules.js'></script>
        <script type='text/javascript' src='../../js/ctp/validator/ctp.validator.js'></script>
		<script type='text/javascript' src='../../js/ctp/button/ctp.ui.button.js'></script>
        <script type='text/javascript' src='../../js/ctp/borderlayout/ctp.ui.borderlayout.js'></script>
        <script type='text/javascript' src='../../js/ctp/borderlayout/jquery.layout.js'></script>
        <script type='text/javascript' src='../../js/ctp/panel/ctp.ui.panel.js'></script>
        <script type='text/javascript' src='../../js/ctp/public/jquery.bgiframe.js'></script>
        <script type='text/javascript' src='../../js/ctp/groupbox/ctp.ui.groupbox.js'></script>
        <script type='text/javascript' src='../../js/ctp/tabs/ctp.ui.tabs.js'></script>
		<script type='text/javascript' src='../../js/ctp/gridlayout/ctp.ui.gridlayout.js'></script>
        <script type='text/javascript' kind='variant'>

            var panel2;
            var groupbox2;
            var tabs1;
            var groupbox1;
            
        </script>
        <script type='text/javascript' kind='event'>

			function cc(){
				var i=0;
				while(i<20){
					tabs1.addTab({
						title: '网讯' + i,
						url: 'http://80.34.174.1/main.asp?Iagree=yes'
					});
					i++;
				}
				
			}

        </script>
        <script type='text/javascript' kind='ui'>

            $(document).ready(function(){

                //新增一个tab页，addTab(); 
                var button1=new ctp.ui.button({
                    id: 'button1',
                    text: '新增一个标签(网讯)',
                    width: '100%',
                    onClick: function(){
                        tabs1.addTab({title:'网讯',url:'http://80.34.174.1/main.asp?Iagree=yes'});
                    }
                });

                //新增一个tab页，addTab(); 
				var button2=new ctp.ui.button({
                    id: 'button2',
                    text: '新增一个标签(网易)',
                    width: '100%',
                    onClick: function(){
                        tabs1.addTab({title:'网易',url:'http://www.163.com'});
                    }
                });

				//删除指定位置的标签，delTab("标签2")或者delTab(2);
				var button3=new ctp.ui.button({
                    id: 'button3',
                    text: '删除第2个标签',
                    width: '100%',
                    onClick: function(){
                        tabs1.delTab(2);
                    }
                });

                //选择一个tab页，tab.selectTab('tabone'); 入参为标签也的序号（1开始）或者title名
				var button4=new ctp.ui.button({
                    id: 'button4',
                    text: '选择第二个标签',
                    width: '100%',
                    onClick: function(){
                        tabs1.selectTab(2);
                    }
                });
				var button5=new ctp.ui.button({
                    id: 'button5',
                    text: '选择第二十个标签',
                    width: '100%',
                    onClick: function(){
                        tabs1.selectTab(20);
                    }
                });

                //获取指定title的tab页的位置，tab.getTabPosByTitle('tabone');
				var button6=new ctp.ui.button({
                    id: 'button6',
                    text: '获得标签名为’网讯‘的标签的位置',
                    width: '100%',
                    onClick: function(){
                        alert(tabs1.getTabPosByTitle('网讯'));
                    }
                });

				//删除所有标签,delTabAll();
                var button7=new ctp.ui.button({
                    id: 'button7',
                    text: '删除所有标签',
                    width: '100%',
                    onClick: function(){
                        tabs1.delTabAll();
                    }
                });

                
				var button8=new ctp.ui.button({
                    id: 'button8',
                    text: '新增20个标签页',
                    width: '100%',
                    onClick: function(){
                        cc();
                    }
                });

                //得到现有标签的数量,getTabSum();
				var button9=new ctp.ui.button({
                    id: 'button9',
                    text: '现有标签数',
                    width: '100%',
                    onClick: function(){
                        alert(tabs1.getTabSum());
                    }
                });

				//获取指定名字的tab位置，getTabPosByName("标签名");
				var button10=new ctp.ui.button({
                    id: 'button10',
                    text: '获得标签名字为“标签名”的位置',
                    width: '100%',
                    onClick: function(){
                        alert(tabs1.getTabPosByName("标签名"));
                    }
                });

				//获取指定title的ID，getTabIdByTitle("标签3");
				var button11=new ctp.ui.button({
                    id: 'button11',
                    text: '获取Title为“标签3”的ID',
                    width: '100%',
                    onClick: function(){
                        alert(tabs1.getTabIdByTitle("标签3"));
                    }
                });

				//获取指定Name的ID，getTabIdByName("标签名");
				var button12=new ctp.ui.button({
                    id: 'button12',
                    text: '获取name为“标签名”的ID',
                    width: '100%',
                    onClick: function(){
                        alert(tabs1.getTabIdByName("标签名"));
                    }
                });

				//获取指定title的ContentId，getTabContentIdByTitle("标签名");
				var button13=new ctp.ui.button({
                    id: 'button13',
                    text: '获取Title为“标签3”的ContentId',
                    width: '100%',
                    onClick: function(){
                        alert(tabs1.getTabContentIdByTitle("标签3"));
                    }
                });
				
				//获取指定name的ContentId，getTabContentIdByName("标签名");
				var button14=new ctp.ui.button({
                    id: 'button14',
                    text: '获取name为“标签名”的ContentId',
                    width: '100%',
                    onClick: function(){
                        alert(tabs1.getTabContentIdByName("标签名"));
                    }
                });

				//根据标题获取内容区frame中的window对象，getTabContentFrameWinByTitle("标签3");
				var button15=new ctp.ui.button({
                    id: 'button15',
                    text: '根据标题获取内容区frame中的window对象',
                    width: '100%',
                    onClick: function(){
                        alert(tabs1.getTabContentFrameWinByTitle("标签3"));
                    }
                });

				//根据标签name获取内容区frame中的window对象，getTabContentFrameWinByName("标签名");
				var button16=new ctp.ui.button({
                    id: 'button16',
                    text: '根据标签name获取内容区frame中的window对象',
                    width: '100%',
                    onClick: function(){
                        alert(tabs1.getTabContentFrameWinByName("标签名"));
                    }
                });

				//根据标题获取标签里面的子元素，getTabItemsByTitle("标签3");
				var button17=new ctp.ui.button({
                    id: 'button17',
                    text: '根据标题获取标签里面的子元素',
                    width: '100%',
                    onClick: function(){
                        alert(tabs1.getTabItemsByTitle("标签3"));
                    }
                });

				//根据名称获取标签里面的子元素，getTabItemsByName("标签名");
				var button18=new ctp.ui.button({
                    id: 'button18',
                    text: '根据名称获取标签里面的子元素',
                    width: '100%',
                    onClick: function(){
                        alert(tabs1.getTabItemsByName("标签名"));
                    }
                });

				//取得组件DOM的HTML
				var button19=new ctp.ui.button({
                    id: 'button19',
                    text: '取得组件DOM的HTML',
                    width: '100%',
                    onClick: function(){
                        alert(tabs1.getTemplate());
                    }
                });

				//取得当前选中页标签的位置，getCurrentTabPos();
				var button20=new ctp.ui.button({
                    id: 'button20',
                    text: '取得当前选中页标签的位置',
                    width: '100%',
                    onClick: function(){
                        alert(tabs1.getCurrentTabPos());
                    }
                });


				var buttonsLayout = new ctp.ui.gridlayout({
					id:'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [
					     [{element: button1},{element: button2},{element: button3}],
						 [{element: button4},{element: button5},{element: button6}],
						 [{element: button7},{element: button8},{element: button9}],
						 [{element: button10},{element: button11},{element: button12}],
						 [{element: button13},{element: button14},{element: button15}],
						 [{element: button16},{element: button17},{element: button18}],
						 [{element: button20}]
					]
                
                }); 
				var buttonsGroupbox=new ctp.ui.groupbox({
			  	    id: 'buttonsGroupbox',						
					items:[buttonsLayout],
					width:'100%',
					title:'功能测试区'						   
			     });
                tabs1 = new ctp.ui.tabs({
                    id: 'tabs1',
                    height:'300px',
                    tabWidth:'100',
                    moveTabWidth:'30',
                    contentPadding:'20px 0px 0px 0px',
                    items: [
                        {
                            title: '标签11111111111111111',
                            content: [
								'content_3'
                            ]
                            ,operational:true
                        }
                        ,
                        {
                            title: '标签2',
                            content: [
								'content_4'
                            ]
                        }
                        ,
                        {
                            title: '标签3',
                            name:'标签名',
                            content: [
								'content_5'
                            ]
                        }
                    ],
                    operational: false
                    ,noborder:true
                });

                groupbox2 = new ctp.ui.groupbox({
                    id: 'groupbox2',
                    title: '效果展示区',
                    align: 'fill',
                    items: [
                        tabs1
                    ]
                });

                groupbox1 = new ctp.ui.groupbox({
                    id: 'groupbox1',
                    title: '功能测试区',
                    items: [
						'input1','input2','input3','input7','input4','input5','input8','input9','input6'
						
                    ]
                });

                panel2 = new ctp.ui.panel({
                    id: 'panel2',
                    title: 'tabs实例',
                    width: '50%',
                    height: 'auto',
                    align: 'center',
                    collapsible: false,
                    items: [
                        groupbox2,
						buttonsGroupbox,
                        groupbox1
                    ],
                    renderTo: 'body'
                });

            });

        </script>
    </head>
    <body>


	
	
	<div id="content_3">搜狐</div>
	<div id="content_4">网易<br />网易<br />网易<br />网易<br />网易<br />网易<br />网易<br />网易<br /></div>
	<div id="content_5">影空</div>

    </body>
</html>
